<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>users</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="css/user/usertable.css">
	
	
	<script type="text/javascript" src="js/jquery.js"></script>	
	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><!--没这个js就弹不出来  -->
<!-- 	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 -->	
	<script type="text/javascript" src="js/user/bootstrap.min.js"></script>

  </head>
  
  <body>
  <script>
         
   $(function(){
   			var page
            var pageNow=1;
            
            function table(dataRows){
            		var tbody = ""
                    a="<tr><th>"+'序号'+"</th><th>"+'昵称'+"</th><th>"+'密码'+"</th><th>"+'操作'+"</th></tr>"; 
            		$("#tab").append(a);
            		$.each(dataRows, function(i, n) {    
                   	tbody="<tr><td>"+(i+1+(pageNow-1)*3)+"</td><td>"+n.username+"</td><td>"+n.password+"</td><td><a class='btn btn-info' href='javascript:dodelete2("+n.id+","+pageNow+")'>删除</a><a class='btn btn-info' href='javascript:modify("+n.id+","+'"'+n.username+'"'+","+'"'+n.password+'"'+","+pageNow+")'>修改</a></td></tr>";
                    $("#tab").append(tbody);
                    });
             }
  
             
            var ajax=function(){
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "allUsersbyPages",
                data:{"pageNow":parseInt(pageNow)},
                error:function(XMLHttpRequest,textStatus,errorThrown){},
                success: function(json,textstatus) {
        			pageNow=json.pageNow;
        			page=json.pageTotal;
        			console.log(pageNow);
        			$("#tab").children().remove();//删除之前生成的tbody
                    table(json.dataRows);//调用上面的table函数                   
                }
            });
            }
            ajax();
            
            $($(".m1").children("a").eq(0)).click(function(){//首页
                   		pageNow=1;
	                   	ajax();
               });
               
               $($(".m1").children("a").eq(1)).click(function(){//上一页
                   		if(pageNow==1){pageNow=page+1}
                   		pageNow=parseInt(pageNow)-1;
	                   ajax();
               });
               
               $($(".m1").children("a").eq(2)).click(function(){//下一页
                   		if(pageNow==page){pageNow=0}
                   		pageNow=parseInt(pageNow)+1;
	                   	ajax();
               });
               
               $($(".m1").children("a").eq(3)).click(function(){//末页
                   		pageNow=page;
	                   	ajax();
               });
            
            });
          
        
        function dodelete2(id,pageNow){
	        if(window.confirm("  确定要删除？"))
		        {
		        	 $.ajax({
		                type: "POST",
		                dataType: "json",
		                url: "delete",
		                data:{"pageNow":parseInt(pageNow),"id":id},
		                error:function(XMLHttpRequest,textStatus,errorThrown){},
		                success: function(json,textstatus) {
		        				pageNow=json.pageNow;
			        			 $.ajax({
					                type: "POST",
					                dataType: "json",
					                url: "allUsersbyPages",
					                data:{"pageNow":parseInt(pageNow)},
					                error:function(XMLHttpRequest,textStatus,errorThrown){},
					                success: function(json,textstatus) {
					        			pageNow=json.pageNow;
					        			page=json.pageTotal;
					        			console.log(pageNow);
					                    table(json.dataRows);//调用上面的table函数   ,但是说没有定义，只好在下面又定义了一次，应该试试全局函数怎么定义          
					                    
					                    function table(dataRows){
											            		var tbody = ""
											                    a="<tr><th>"+'序号'+"</th><th>"+'昵称'+"</th><th>"+'密码'+"</th><th>"+'操作'+"</th></tr>"; 
											                    $("#tab").children().remove();//删除之前生成的tbody
											            		$("#tab").append(a);
											            	$.each(dataRows, function(i, n) {    
                   												tbody="<tr><td>"+(i+1+(pageNow-1)*3)+"</td><td>"+n.username+"</td><td>"+n.password+"</td><td><a class='btn btn-info' href='javascript:dodelete2("+n.id+","+pageNow+")'>删除</a><a class='btn btn-info' href='javascript:modify("+n.id+","+'"'+n.username+'"'+","+'"'+n.password+'"'+","+pageNow+")'>修改</a></td></tr>";
											       		      	$("#tab").append(tbody);
											                    });
											            	 }      
					                				}
					            			});     
                					}
            				});	
       				}
 				}
 				
		
function modify(id ,name,pw,pageNow)
 {
 	$("#myModal .modal-content .modal-body input:eq(0)").attr("placeholder",name);
 	$("#myModal .modal-content .modal-body input:eq(1)").attr("placeholder",pw);
 	$("#myModal").modal("toggle");
 	
 	$("#myModal .modal-content .modal-footer a").click(function(){
 	var newname=$("#myModal .modal-content .modal-body input:eq(0)").val();
 	var newpw=$("#myModal .modal-content .modal-body input:eq(1)").val();
 		$.ajax({
	     type: "POST",
	     dataType: "json",
	     url: "modify",
	     data:{"id":id,"name":newname,"pw":newpw,"pageNow":parseInt(pageNow)},
	     error:function(XMLHttpRequest,textStatus,errorThrown){},
	     success: function(json,textstatus) {
				pageNow=json.pageNow;
				$.ajax({
	                type: "POST",
	                dataType: "json",
	                url: "allUsersbyPages",
	                data:{"pageNow":parseInt(pageNow)},
	                error:function(XMLHttpRequest,textStatus,errorThrown){},
	                success: function(json,textstatus) {
	        			pageNow=json.pageNow;
	        			page=json.pageTotal;
	        			console.log(pageNow);
	                    table(json.dataRows);//调用上面的table函数   ,但是说没有定义，只好在下面又定义了一次，应该试试全局函数怎么定义
	                   
	         	
	         	function table(dataRows){
	            		var tbody = ""
	                    a="<tr><th>"+'序号'+"</th><th>"+'昵称'+"</th><th>"+'密码'+"</th><th>"+'操作'+"</th></tr>"; 
	                    $("#tab").children().remove();//删除之前生成的tbody
	            		$("#tab").append(a);
	            	$.each(dataRows, function(i, n) {    
                   		tbody="<tr><td>"+(i+1+(pageNow-1)*3)+"</td><td>"+n.username+"</td><td>"+n.password+"</td><td><a class='btn btn-info' href='javascript:dodelete2("+n.id+","+pageNow+")'>删除</a><a class='btn btn-info' href='javascript:modify("+n.id+","+'"'+n.username+'"'+","+'"'+n.password+'"'+","+pageNow+")'>修改</a></td></tr>";
	       		      	$("#tab").append(tbody);
	                    });
		             } 
	         	
	 		}
		});
 		}
 	});
});
}
  </script>
    <div id="content">

    <table cellspacing="0" id="tab">
    </table>
    <div class="m1"><a class="btn btn-info">首页</a><a class="btn btn-info">上一页</a><a class="btn btn-info">下一页</a><a class="btn btn-info">末页</a></div>
	
	<!-- modal start -->
	<div  class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="width: 402px; border-left-width: 1px;margin-left: 96px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        
                <h4 class="modal-title" id="myModalLabel">修改</h4>
            </div>
            <form autocomplete="off" >
            <div class="modal-body">
                <div class="form-group">
                    <input type="text" class="form-control" id="name" placeholder="昵称" autocomplete="off">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="position" placeholder="密码" autocomplete="off">
                </div>

            </div>
            </form>
            
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <a type="button" class="btn btn-primary" id="save">保存</a>
            </div>
        </div>
    </div>
</div>

	<!-- modal end -->
	</div>
	
  </body>
</html>
